<template>
	<view>
		<!-- <view class="des">首页</view> -->

		<view class="uni-padding-wrap">			
			<swiper class="swiper" :indicator-dots="sliderIndicatorDots" :autoplay="sliderAutoplay" :interval="sliderInterval" :duration="sliderDuration">
				<swiper-item v-for="(item, index) in sliderDataList" :key="index"  @click="onSliderItemClicked(item.actioninfo)">
					<view class="swiper-item banner">
						<image class="banner-img" :src="item.imgsrc"></image>
						<view v-if="sliderShowTitle" class="banner-title">{{item.title}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="uni-padding-wrap">
			<view class="uni-swiper-msg">
				<view class="uni-swiper-msg-icon">
					<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" mode="widthFix"></image>
				</view>
				<swiper :vertical="marqueenVertical" autoplay="true" circular="true" :interval="marqueenInterval">
					<swiper-item v-for="(item, index) in marqueenDataList" :key="index" @click="onMarqueenItemClicked(item.actioninfo)">
						<view>{{item.title}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>


<!-- 			<swiper :indicator-dots="true" :style="{height:swiperGridHeight,width:swiperGridWidth}">
				 <swiper-item>
					 <view class="grid-view">
						<uni-grid :options="data1" :show-border="false"  @click="goList" />
					</view>
				</swiper-item>
			</swiper> -->

		<view class="gridContainer">
			<swiper class="grid" :indicator-dots="gridIndicatorDotShow" >
				 <swiper-item v-for="(pageData, pageIndex) in gridDataList" :key="pageIndex">
					<view class="grid-view">
						<uni-grid :options="pageData.data" :pageIndex="pageData.pageIndex" :column-num="gridColumnNum" :show-border="gridShowBorder" :show-out-border="gridShowOutBorder" @click="onGridItemClicked" />
					</view>
				</swiper-item>
			</swiper>
		</view>

<!-- 		<view class="gridContainer">
			<swiper class="grid" :indicator-dots="gridIndicatorDotShow" :autoplay="false" :circular="false">
				<swiper-item v-for="(pageData, pageIndex) in gridDataList" :key="pageIndex">
					<view class="uni-grid-9">
						<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in pageData.data" :key="index"   @click="goList(item)">
							<image class="uni-grid-9-image" :src="item.iconsrc"></image>
							<text class="uni-grid-9-text">{{item.name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		
	</view>
</template>

<script>
	import uniGrid from '@/components/uni-grid.vue'
	import service from "@/service.js"
	
	export default {
		components: {
			uniGrid
		},
		data() { 
			return {
				
				swiperGridHeight: '100%',
				swiperGridWidth: '100%',
				data1: [
					// {
					// 	iconsrc: '/static/grid/c1.png',
					// 	name: 'Grid'
					// },
					// {
					// 	iconsrc: '/static/grid/c2.png',
					// 	name: 'Grid'
					// },
					// {
					// 	iconsrc: '/static/grid/c3.png',
					// 	name: 'Grid'
					// },
					// {
					// 	iconsrc: '/static/grid/c4.png',
					// 	name: 'Grid'
					// }
				],
				
				sliderIndicatorDots: false,
				sliderAutoplay: true,
				sliderInterval: 2000,
				sliderDuration: 500,
				sliderDataList: [
					//{
					// 	"imgsrc":"https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90", 
					// 	"title":"首页轮播图片公告"
					// }, 
					// {
					// 	"imgsrc":"https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90", 
					// 	"title":"首页轮播图片公告2"
					// }, 
					// {
					// 	"imgsrc":"https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90", 
					// 	"title":"首页轮播图片公告3"	
					// }
				],
				sliderShowTitle: true,
				
				marqueenVertical: true,
				marqueenInterval: 3000,
				marqueenDataList : [],
				
				
				gridDataList: [
					// "/static/grid/c1.png", "/static/grid/c2.png", "/static/grid/c3.png",
					// "/static/grid/c4.png", "/static/grid/c5.png", "/static/grid/c6.png",
					// "/static/grid/c7.png", "/static/grid/c8.png", "/static/grid/c9.png"
				],
				gridPagesCount : 0,
				gridColumnNum : 3, //列数
				gridIndicatorDotShow: false,
				gridShowBorder : false,
				gridShowOutBorder : false,
				isCircular:false
			};
		},
		onLoad:function(){
			console.log("onload mainpage");
			this.$serverBaseUrl = service.getServerHost();
			this.getUserInfo();			

		},
		methods: {
			goList(e) {
				uni.navigateTo({
					url: '/pages/list/docList?docunid=' + e.number +'&jsonurl=' + e.actioninfo.jsonurl,
					//url: '/pages/list/tabbar-native?jsonurl=' + e
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: '请稍候，数据加载中...',
					mask: true
				});
				uni.request({
					url: this.$serverBaseUrl + "/MobilePortal.nsf/GetUserinfo?openagent",
					data: {
						'Client': service.getDeviceType()
					},
					success: (res) => {
						if (service.getServerResponseErr(res.data) == 0) {
							let jsonData = res.data;
							//console.log( JSON.stringify(jsonData));
							this.parseUserInfoJSONData(jsonData.data);
							uni.hideLoading();
						}
					},
					fail: (res) => {
						uni.showToast({
							title:res.errMsg
						})
					}
				})				
			},
			parseUserInfoJSONData(jsonData) {
				//设置顶部导航栏标题
				let indextitle = jsonData.indextitle;
				uni.setNavigationBarTitle({
					title: indextitle
				})
				
				let showslider = jsonData.showslider;
				if (showslider == '1') {
					let sliderinfo = jsonData.sliderinfo;
					this.parseSliderInfo(sliderinfo);
				}
				
				let showmarqueen = jsonData.showmarqueen;
				if (showmarqueen == '1') {
					this.parseMarqueen(jsonData.marqueeinfo)
				}
				
				this.parseNavInfo(jsonData.navinfo);
				
			},
			parseSliderInfo(sliderinfo) {//解释顶部Banner
				let showtitle = sliderinfo.showtitle;
				if (showtitle != 1) this.sliderShowTitle = false;
				
				let interval = sliderinfo.interval;
				this.sliderInterval = interval;
				
				let sliderPicHeight = sliderinfo.picheight;
				
				let datalist = sliderinfo.datalist;
				for (let i = 0; i < datalist.length; i++) {
					datalist[i].imgsrc = this.$serverBaseUrl + datalist[i].imgsrc;
				}
				this.sliderDataList = datalist;
			},
			parseMarqueen(marqueeinfo) {//解释中间的跑马灯
				
				let marqueenDirection = marqueeinfo.direction;
				if (marqueenDirection != 'LEFT') this.marqueenVertical = false;
				
				let scrolldelay = marqueeinfo.scrolldelay;
				let marqueenHeight = marqueeinfo.height;
				
				this.marqueenDataList = marqueeinfo.datalist;
				
			},
			parseNavInfo(navinfo) {//解释九宫格数据		
				//let show_out_border = navinfo['show_out_border'];
				let iconwidth = navinfo.iconwidth;
				let iconheight = navinfo.iconheight;
				let jggcellheight = navinfo.jggcellheight;
				let datalist = navinfo.datalist;
				this.gridShowOutBorder = navinfo.showOutBorder;
				this.gridShowBorder = navinfo.showBorder;
				
				//console.log(datalist.length + " showoutborder:" + showoutborder + " showborder:" + showborder);
				//每页的列数
				this.gridColumnNum = navinfo.columnNum;
				//每页的行数
				let rowsPerPage = navinfo.rowNum;
				//每页的最多可放item总数
				let itemsTotalPerPage = rowsPerPage * this.gridColumnNum;
				//总共的
				let itemsTotal = datalist.length;
				
				let pagesCount = parseInt( datalist.length / itemsTotalPerPage );
				if ((datalist.length % itemsTotalPerPage) > 0) pagesCount = pagesCount + 1;
				
				let ary = [];
				for (let i = 0,  k = 0; i < pagesCount; i++) {
					let aryItem = {
						pageIndex: i,
						data: []
					};
					for (let j = 0; j < itemsTotalPerPage && k < datalist.length; j++, k++) {
						datalist[k].iconsrc = this.$serverBaseUrl + datalist[k].iconsrc;
						aryItem.data.push( datalist[k] );
					}
					ary.push(aryItem);
				}
				//console.log("randomfn  "+ ary.toString());
				this.gridDataList = ary;
				
				if (pagesCount > 1) this.gridIndicatorDotShow = true;

			},
			onSliderItemClicked(item) {
				console.log( JSON.stringify(item) );
				this.goList(item.actioninfo);
			},
			onMarqueenItemClicked(item) {
				console.log(JSON.stringify(item));
				this.goList(item.actioninfo);
			},
			onGridItemClicked(item) {
				console.log(JSON.stringify(item) + " info:" + JSON.stringify(this.gridDataList[item.page].data[item.index]));
				let actioninfo = this.gridDataList[item.page].data[item.index].actioninfo;
				switch (actioninfo.actiontype){
					case "1"://"跳转到标准导航列表页面",
						this.goList(this.gridDataList[item.page].data[item.index]);
						break;
					case "2"://跳转到标准文档查看页面
						break;
					case "3"://执行js函数
						break;	
					default:
						break;
				}
			}
		}
	}
</script>

<style>
	/* swiper msg */
	.uni-swiper-msg{width:100%; padding:12rpx 0; flex-wrap:nowrap; display:flex;}
	.uni-swiper-msg-icon{width:50upx; margin-right:0upx;}
	.uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
	.uni-swiper-msg swiper{width:100%; height:50upx;}
	.uni-swiper-msg swiper-item{line-height:50upx;}
	
	.gridContainer {
		padding: 0upx 30upx 30upx
	}
	.grid-view {
		/* #ifdef H5 */
		padding: 0 0.5px;
		/* #endif */
		box-sizing: border-box;
	}
	
	/* 九宫格 */
	.uni-grid-9 {
		background: #0FAEFF;
		width: 750upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-top: 2upx solid #eee;
	}
	.uni-grid-9-item {
		width: 250upx;
		height: 200upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom: 2upx solid;
		border-right: 2upx solid;
		border-color: #eee;
		box-sizing: border-box;
	}
	
	
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}
	
	.banner-img {
		width: 100%;
	}
	
	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}
	
	.swiper {
		height: 300upx;
	}
	.swiper-item {
		display: block;
		height: 300upx;
		line-height: 300upx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40upx;
		margin-bottom: 0;
	}
	
	.grid {
		
		width: 100%;
		height: 700upx;
		background:#f2f2f2;
	}
	
	.uni-common-mt{
		margin-top:60upx;
		position:relative;
	}
	
	.info {
		position: absolute;
		right:20upx;
	}
</style>
